<template>
  <div class="page-content">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex items-center">
        <h1 class="text-lg font-semibold">个人中心</h1>
      </div>
    </header>

    <main class="container mx-auto px-4" style="padding: 0">
      <!-- 用户信息区域 -->
      <div class="relative mb-6">
        <!-- 圆弧背景 -->
        <div
          class="bg-gradient-to-b from-blue-500 to-blue-600 h-32 rounded-b-3xl relative overflow-hidden"
        >
          <!-- 装饰性圆圈 -->
          <div
            class="absolute top-4 right-8 w-16 h-16 bg-white bg-opacity-10 rounded-full"
          ></div>
          <div
            class="absolute top-12 right-4 w-8 h-8 bg-white bg-opacity-10 rounded-full"
          ></div>
          <div
            class="absolute top-8 left-8 w-12 h-12 bg-white bg-opacity-10 rounded-full"
          ></div>
        </div>

        <!-- 用户信息卡片 -->
        <div
          class="absolute top-12 left-1/2 transform -translate-x-1/2 w-full px-14"
        >
          <div class="bg-white rounded-2xl shadow-lg p-4 text-center">
            <!-- 头像 -->
            <div class="relative inline-block mb-3">
              <div
                class="w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center shadow-lg"
              >
                <i class="fas fa-user text-white text-2xl"></i>
              </div>
              <!-- 在线状态指示器 -->
              <div
                class="absolute bottom-1 right-1 w-4 h-4 bg-green-400 border-2 border-white rounded-full"
              ></div>
            </div>

            <!-- 用户名 -->
            <h2 class="text-lg font-bold text-gray-800">张三</h2>
          </div>
        </div>
      </div>

      <!-- 使用统计 -->
      <div
        style="margin-left: 1rem; margin-right: 1rem"
        class="bg-white rounded-xl shadow-md p-4 mb-6 mt-24"
      >
        <h2 class="text-lg font-semibold mb-4">使用统计</h2>
        <div class="flex gap-4">
          <!-- 左侧：使用统计 -->
          <div class="w-1/2">
            <div class="h-full">
              <div
                class="bg-blue-50 p-4 rounded-xl text-center flex flex-col justify-center h-full"
              >
                <div class="mb-2">
                  <i class="fas fa-file-alt text-blue-600 text-xl"></i>
                </div>
                <p class="text-3xl font-bold text-blue-700 mb-1">567</p>
                <p class="text-sm text-gray-600 font-medium">生成文件数</p>
              </div>
            </div>
          </div>

          <!-- 右侧：功能使用统计 -->
          <div class="w-1/2">
            <div class="space-y-2 h-full">
              <!-- 诉状转换 -->
              <div class="flex items-center p-2 bg-blue-50 rounded-lg">
                <div class="w-6 h-6 bg-blue-500 rounded-lg flex items-center justify-center mr-3">
                  <i class="fas fa-exchange-alt text-white text-xs"></i>
                </div>
                <div class="flex-1">
                  <div class="font-medium text-gray-800 text-sm">诉状转换</div>
                  <div class="flex items-center">
                    <span class="text-xs text-gray-500">本月剩余</span>
                    <span class="text-sm font-bold text-blue-600 ml-1">20/20</span>
                  </div>
                </div>
              </div>

              <!-- 诉状生成 -->
              <div class="flex items-center p-2 bg-green-50 rounded-lg">
                <div class="w-6 h-6 bg-green-500 rounded-lg flex items-center justify-center mr-3">
                  <i class="fas fa-file-alt text-white text-xs"></i>
                </div>
                <div class="flex-1">
                  <div class="font-medium text-gray-800 text-sm">诉状生成</div>
                  <div class="flex items-center">
                    <span class="text-xs text-gray-500">本月剩余</span>
                    <span class="text-sm font-bold text-green-600 ml-1">20/20</span>
                  </div>
                </div>
              </div>

              <!-- 答辩状转换 -->
              <!-- <div class="flex items-center p-2 bg-orange-50 rounded-lg">
                <div class="w-6 h-6 bg-orange-500 rounded-lg flex items-center justify-center mr-3">
                  <i class="fas fa-sync-alt text-white text-xs"></i>
                </div>
                <div class="flex-1">
                  <div class="font-medium text-gray-800 text-sm">答辩状转换</div>
                  <div class="flex items-center">
                    <span class="text-xs text-gray-500">本月剩余</span>
                    <span class="text-sm font-bold text-orange-600 ml-1">20/20</span>
                  </div>
                </div>
              </div> -->

              <!-- 答辩状生成 -->
              <div class="flex items-center p-2 bg-purple-50 rounded-lg">
                <div class="w-6 h-6 bg-purple-500 rounded-lg flex items-center justify-center mr-3">
                  <i class="fas fa-gavel text-white text-xs"></i>
                </div>
                <div class="flex-1">
                  <div class="font-medium text-gray-800 text-sm">答辩状生成</div>
                  <div class="flex items-center">
                    <span class="text-xs text-gray-500">本月剩余</span>
                    <span class="text-sm font-bold text-purple-600 ml-1">20/20</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 功能菜单 -->
      <div
        style="margin-left: 1rem; margin-right: 1rem"
        class="bg-white rounded-xl shadow-md overflow-hidden mb-6"
      >
        <div class="border-b border-gray-100">
          <router-link
            to="/usage-history"
            class="flex items-center p-4 cursor-pointer hover:bg-gray-50"
          >
            <div
              class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"
            >
              <i class="fas fa-history text-blue-600"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">文件列表</h3>
              <p class="text-sm text-gray-500">查看历史生成的文件列表</p>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </router-link>
        </div>

        <!-- <div class="border-b border-gray-100">
          <router-link to="/membership" class="flex items-center p-4 cursor-pointer hover:bg-gray-50">
            <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-3">
              <i class="fas fa-crown text-orange-600"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">会员中心</h3>
              <p class="text-sm text-gray-500">升级会员享受更多权益</p>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </router-link>
        </div> -->

        <div class="border-b border-gray-100">
          <router-link
            to="/help"
            class="flex items-center p-4 cursor-pointer hover:bg-gray-50"
          >
            <div
              class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center mr-3"
            >
              <i class="fas fa-question-circle text-gray-600"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">帮助中心</h3>
              <p class="text-sm text-gray-500">常见问题和使用指南</p>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </router-link>
        </div>

        <div class="border-b border-gray-100">
          <router-link
            to="/about"
            class="flex items-center p-4 cursor-pointer hover:bg-gray-50"
          >
            <div
              class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center mr-3"
            >
              <i class="fas fa-info-circle text-gray-600"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">关于我们</h3>
              <p class="text-sm text-gray-500">版本信息和联系方式</p>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </router-link>
        </div>

        <!-- <div>
          <div class="flex items-center p-4 cursor-pointer hover:bg-gray-50">
            <div
              class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-3"
            >
              <i class="fas fa-sign-out-alt text-red-600"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">退出登录</h3>
              <p class="text-sm text-gray-500">安全退出当前账号</p>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </div>
        </div> -->
      </div>

      <!-- 版本信息 -->
      <div class="text-center text-sm text-gray-500 mb-4">
        <p>版本号：v1.0.0</p>
        <p class="mt-1">© 2023 要素式诉状小程序</p>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: "Profile",
};
</script>
